<template>
	<view class="ticket_details">
		<view class="header-pic">
			<template v-if="bannerList.length>0">
				<u-swiper
					:list="bannerList"
					height="420rpx"
				></u-swiper>
			</template>
			<template v-else>
				<view class="noPhone">
					<view class="iconfont icon-icon_noPhoto3 pic"></view>
				</view>
			</template>
		</view>
		<view class="wrapper">
			<view class="row1">
				<view class="r1-left">
					<text class="symbol">￥</text>
					<text>{{price}}</text>
				</view>
				<view class="r1-right">
					库存：{{inventory}}
				</view>
			</view>
			<view class="row2">
				<text class="name1">{{area}}</text>
				<text class="name2">（{{store}})</text>
			</view>
			<view class="row3">
				{{intro}}
			</view>
			<!-- <view class="row4">
				<view class="item" v-for="(item,index) in fishType" :key="index">
					{{item}}
				</view>
			</view> -->
			
			<view class="row5">
				<view class="box-row">
					<view class="label">垂钓日期：</view>
					<view class="cont">{{date}}</view>
				</view>
				<view class="box-row">
					<view class="label">营业时间：</view>
					<view class="cont">{{businessHours}}</view>
				</view>
				<view class="box-row">
					<view class="label">钓场电话：</view>
					<view class="cont">{{storePhone}}</view>
				</view>
				<!-- <view class="box-row">
					<view class="label">可用区域：</view>
					<view class="cont-wrap">
						<view class="cont" v-for="(item,index) in moreInfo.area_config" :key ="index">
							<view>{{item.areaName}}</view>
							(<view v-for="(cItem,cIndex) in item.seatList" :key="cIndex" class="cont-item">{{cItem.name}}</view>)
						</view>
					</view>
					
				</view> -->
			</view>
			<view class="select-seat" v-if="moreInfo.area_config.length>0">
				<view class="label">可用区域：</view>
				<!-- <text>{{storePhone}}</text> -->
				<view class="ss-cont-wrap">
					<view class="ss-cont" v-for="(item,index) in moreInfo.area_config" :key ="index">
						<view>{{item.areaName}}</view>
						(<view v-for="(cItem,cIndex) in item.seatList" :key="cIndex" class="ss-cont-item">{{cItem.name}}</view>)
					</view>
				</view>
			</view>
			<view class="more-info" @click="showMore = true">
				<u-icon name="/static/images/report.png" size="30rpx" color="#4E4C56"></u-icon>
				<view class="tags">
					<view class="single-tag">
						选位模式
					</view>
					<u-line direction="col" length="18rpx"></u-line>
					<view class="single-tag">
						计重模式
					</view>
					<u-line direction="col" length="18rpx"></u-line>
					<view class="single-tag">
						可否换位
					</view>
					<u-line direction="col" length="18rpx"></u-line>
					<view class="single-tag">
						回鱼计价
					</view>
					<!-- <u-line direction="col" length="18"></u-line>
					<view class="single-tag">
						垂钓区域
					</view> -->
				</view>
				<u-icon name="arrow-right" size="24rpx" color="#C8CEDA"></u-icon>
			</view>
			
			<view class="select-wrap">
				<view class="row6">
					<view class="tit">
						选择时长
					</view>
					<view class="option-wrap">
						<view class="option-item" :class="item.id === timeActive?'active':''" v-for="(item,index) in timeList" :key="item.id" @click="changleTime(item)">
							{{item.name}}
						</view>
					</view>
				</view>
				<!-- <u-gap height="1" bgColor="#efefef" marginTop="15" v-if="explain"></u-gap>
				<view class="row7" v-if="explain">
					<view class="option-cont-wrap">
						<text class="tit">
							当前规格说明：
						</text>
						<text>{{explain}}</text>
					</view>
				</view> -->
			</view>
		</view>
		<view class="footer-wrap">
			<view class="left">
				<view class="icon-btn" @click="navTo">
					<u-icon name="/static/images/shop.png" size="46rpx"></u-icon>
				</view>
				<view class="icon-btn">
					<button open-type="share">
						<view class="share-icon">
							<u-icon name="/static/images/share.png" size="40rpx"></u-icon>
						</view>
					</button>
				</view>
			</view>	
			<view class="right">
				<view class="btn" @tap="$u.throttle(submitOrder, 500)">
					立即购买
				</view>
			</view>
			
		</view>
		<u-popup :show="showMore" :round="15" mode="bottom" @close="showMore= false">
			<view class="more-popup">
				<view class="title">
					钓票说明
				</view>
				<view class="list-wrap">
					<view class="row">
						<view class="left">
							选位模式
						</view>
						<view class="right">
							{{moreInfo.seat_mode | desetope}}
						</view>
					</view>
					<view class="row">
						<view class="left">
							是否允许换位
						</view>
						<view class="right">
							{{moreInfo.change_seat_rule_allow | changeSeat}}
						</view>
					</view>
					<view class="row">
						<view class="left">
							换位间隔
						</view>
						<view class="right">
							{{moreInfo.change_seat_rule_delay | empty}} 分钟
						</view>
					</view>
					<view class="row">
						<view class="left">
							换位价格
						</view>
						<view class="right">
							{{moreInfo.change_seat_price | empty}} 元
						</view>
					</view>
					<view class="row">
						<view class="left">
							最大垂钓准备时长
						</view>
						<view class="right">
							{{moreInfo.max_prepare_time | empty}} 分钟
						</view>
					</view>
					<view class="row">
						<view class="left">
							计重模式
						</view>
						<view class="right">
							{{moreInfo.ret_weight_mode | weightMode}}
						</view>
					</view>
					<view class="row">
						<view class="left">
							当天此鱼票最大出鱼斤数
						</view>
						<view class="right">
							{{moreInfo.max_ret_per_day | empty}}斤
						</view>
					</view>
					<view class="row">
						<view class="left">
							回鱼计价模式
						</view>
						<view class="right">
							{{moreInfo.ret_price_rule.mode | returenFishMode}}
						</view>
					</view>
					<view class="row">
						<view class="left">
							回鱼价格
						</view>
						<view class="right" v-if="moreInfo.ret_price_rule.mode === 0">
							{{moreInfo.ret_price_rule.pric}}元/斤
						</view>
						<view class="right" v-if="moreInfo.ret_price_rule.mode === 1">
							<text class="single" v-for="(item,index) in moreInfo.ret_price_rule.ruleList" :key="index">
								<template v-if="item.scope !== 'final'">
									{{item.start}}-{{item.scope}}斤/{{item.price}}元
								</template>
								<template v-else>
									大于{{item.start}}斤/{{item.price}}元
								</template>
							</text>
						</view>
					</view>
					<view class="row">
						<view class="left">
							垂钓区域
						</view>
						<view class="right">
							<view class="single-area" v-for="(item,index) in moreInfo.area_config" :key ="index">
								<view>{{item.areaName}}</view>
								(<view v-for="(cItem,cIndex) in item.seatList" :key="cIndex">{{cItem.name}}</view>)
							</view>
						</view>
					</view>
				</view>
				<view class="btn" @click="showMore = false">
					我知道了
				</view>
			</view>
		</u-popup>
		<u-loading-page bg-color="#00000066" color="#ffffff" fontSize="28rpx" iconSize="36rpx" :loading="pageLoading"></u-loading-page>
	</view>
</template>

<script>
	import { mapGetters } from "vuex";
	import { configMap } from "@/utils";
	import { toLogin } from '@/libs/login.js';
	import { getFishingProductDetail,createOrder } from '@/api/store.js';
	import resData from './data.js'
	export default {
		computed:{
			...configMap([], mapGetters(['isLogin'])),
		},
		data() {
			return {
				pageLoading:false,
				showMore:false,//显示更多信息
				storeId:'',//钓场id
				areaId:null,//钓塘ID
				seat:null,//钓位（)
				bannerList:[],
				price:'0.00',//价格
				inventory:'0',//库存
				store:'--',//钓场
				area:'--',//钓塘名称
				intro:'--',//简介
				fishType:[],//鱼种
				date:'--',//垂钓时间
				businessHours:'--',//营业时间
				storePhone:'--',//钓场电话
				// explain:null,//规格说明
				timeActive:null,//选中id
				moreInfo:{
					seat_mode:null,//选位模式  0-自选，1-摇号
					ret_weight_mode:null,//计重模式 0-计重 1-计条
					change_seat_rule_allow:null,//是否允许换位 1-允许 0-不允许
					change_seat_rule_delay:null,//换位间隔分钟
					max_prepare_time:null,//最大垂钓准备时长
					max_ret_per_day:null,//当天该类型鱼票最大出鱼斤数
					change_seat_price:null,//换位价格
					ret_price_rule:{
						mode: null,//回鱼模式 0-固定价格 1-阶梯回鱼
						pric: null,//固定价格时的单价
						ruleList:[
							/* {
								start:0,
								scope:10,
								price:1
							},
							{
								start:10,
								scope:20,
								price:2
							},
							{
								start:20,
								scope:'final',
								price:3
							} */
						]
					},
					area_config:[
						/* {
							areaName:'1区',
							seatList:[
								{
									name:'1号',
									no:'1'
								},
								{
									name:'2号',
									no:'2'
								},
								{
									name:'3号',
									no:'3'
								}
							]
						},
						{
							areaName:'3区',
							seatList:[
								{
									name:'1号',
									no:'1'
								},
								{
									name:'2号',
									no:'2'
								},
								{
									name:'5号',
									no:'5'
								}
							]
						} */
					],//支持垂钓区域
					
				},
				timeList:[
					/* {
						id:10,
						name:'4小时',
						price:'100.00',
						stock:11,
						explain:'回鱼价格：1-50kg/10元'
					},
					{
						id:11,
						name:'5小时',
						price:'150.00',
						stock:13,
						explain:'回鱼价格：1-50kg/12元'
					},
					{
						id:12,
						name:'6小时',
						price:'200.00',
						stock:241,
						explain:'回鱼价格：1-50kg/13元'
					},
					{
						id:13,
						name:'7小时',
						price:'250.00',
						stock:26,
						explain:'回鱼价格：1-50kg/14元'
					} */
				],
				resData:resData
				
			};
		},
		onLoad(e) {
			if (!e.areaID) return this.$util.Tips({
				title: '缺少参数无法购买钓票'
			}, {
				tab: 1,
				url: '/pages/fishingPond/index'
			});
			this.init(e)
			
		},
		//分享页面
		onShareAppMessage(res) {
		    let storeID = this.storeId;
		    let areaID = this.areaId;
			let timeActive = this.timeActive
		    return {
		      title: `${this.store}(${this.area})`,
		      path: `/pages/store/ticket_details/index?storeID=${storeID}&areaID=${areaID}&timeActive=${timeActive}`
		    }
		},
		methods:{
			//初始化
			init(e){
				let ee={
				    "storeID": "8",
				    "areaID": "116"
				}
				// this.storeId = e.storeID
				// this.areaId = e.areaID
				//请求钓票详情
				this.getdetail();//本地固定假数据
				//this.getFishingProductDetailData(e)//接口数据
				
				/* if(e.areaID&&e.timeActive){
					//如果是通过分享的页面进来，则将选中的规格回显
					this.id = e.areaID
					this.timeActive = Number(e.timeActive)
					let fIndex = this.timeList.findIndex(item=>item.id === this.timeActive)
					if(fIndex!==-1){
						this.price = this.timeList[fIndex].price
						this.inventory = this.timeList[fIndex].stock
						// this.explain = this.timeList[fIndex].explain
					}else{
						this.price = this.timeList[0].price
						// this.explain = this.timeList[0].explain
						this.inventory = this.timeList[0].stock
						this.timeActive = this.timeList[0].id
					}
				} */
			},
			getdetail(){
				console.log(111,this.resData);
				let {price,stock,store_name,store_info,fishing,sku,slider_image,Merchant} = this.resData.data;
				// let {open_start,open_end,mer_phone,fishing_date} = fishing?.mer_info
				let open_start = '',open_end = '',mer_phone='--',fishing_date='--'
				if(fishing?.mer_info){
					open_start = fishing.mer_info.open_start
					open_end = fishing.mer_info.open_end
					mer_phone = fishing.mer_info.mer_phone
					fishing_date = fishing.mer_info.fishing_date
					
				}
				// let {seat_mode,ret_weight_mode,change_seat_rule,max_prepare_time,max_ret_per_day} = fishing.ticket_config
				let seat_mode = '',ret_weight_mode = '',change_seat_rule={},max_prepare_time='',max_ret_per_day=''
				if(fishing?.ticket_config){
					seat_mode = fishing.ticket_config.seat_mode
					ret_weight_mode = fishing.ticket_config.ret_weight_mode
					change_seat_rule = fishing.ticket_config.change_seat_rule
					max_prepare_time = fishing.ticket_config.max_prepare_time
					max_ret_per_day = fishing.ticket_config.max_ret_per_day
				}
				// let {change_seat_price,ret_price_rule} = fishing.financial_config
				let change_seat_price = '',ret_price_rule = null
				if(fishing?.financial_config){
					change_seat_price = fishing.financial_config.change_seat_price
					ret_price_rule = fishing.financial_config.ret_price_rule
				}
				this.price = price
				// this.inventory = stock
				this.store = Merchant.mer_name
				this.area = store_name
				this.intro = store_info
				this.fishType = ['鲤鱼','草鱼','鲫鱼'],//鱼种
				this.date = fishing_date
				this.businessHours = open_start&&open_end?`${open_start.slice(0,-3)}-${open_end.slice(0,-3)}`:`24小时`
				this.storePhone = mer_phone
				this.moreInfo.seat_mode = seat_mode
				this.moreInfo.ret_weight_mode = ret_weight_mode
				this.moreInfo.change_seat_rule_allow = change_seat_rule!=null?change_seat_rule.allow:''
				this.moreInfo.change_seat_rule_delay = change_seat_rule!=null?change_seat_rule.delay:''
				this.moreInfo.max_prepare_time = max_prepare_time
				this.moreInfo.max_ret_per_day = max_ret_per_day
				this.moreInfo.change_seat_price = change_seat_price
				this.moreInfo.ret_price_rule.mode = ret_price_rule!=null?ret_price_rule.mode:''
				this.moreInfo.ret_price_rule.pric = ret_price_rule!=null?ret_price_rule.pric:''
				//修改回鱼价格数据结构为数组对象
				let newRuleList = []
				if(ret_price_rule){
					let ruleKey = Object.keys(ret_price_rule.rule)
					let ruleValue = Object.values(ret_price_rule.rule)
					for(let i = 0;i<ruleKey.length;i++){
						let start
						if(i === 0)start = '0'
						else start = ruleKey[i-1]
						newRuleList[i] = {
							start,
							scope:ruleKey[i],
							price:ruleValue[i]
						}
					}
				}
				this.moreInfo.ret_price_rule.ruleList = newRuleList
				console.log(newRuleList);
				//修改区域数组数据结构
				let area_config = []
				if(fishing?.area_config){
					fishing.area_config.forEach(function(element,index) {
						area_config[index] = {
							areaName: Object.keys(element)[0],
							seatList:Object.values(element)[0]
						}
					});
				}
				this.moreInfo.area_config = area_config
				//修改sku数据结构
				if(sku){
					let skuArr = Object.values(sku)
					this.timeList = skuArr.map((item,i)=>{
						return {
							id:item.unique,
							price:item.price,
							name:item.sku?item.sku:'--',
							stock:item.stock
						}
					})
					// if(!e.timeActive){
					// 	//如果不是通过分享进入
					// 	this.price = this.timeList[0].price
					// 	// this.explain = this.timeList[0].explain
					// 	this.inventory = this.timeList[0].stock
					// 	this.timeActive = this.timeList[0].id
					// }else{
					// 	// 否则查找到对应规格后选中
					// 	let timeList = this.timeList
					// 	this.timeActive = e.timeActive
					// 	let fIndex = timeList.findIndex(item=>item.id === this.timeActive)
					// 	if(fIndex!==-1){
					// 		this.price = this.timeList[fIndex].price
					// 		this.inventory = this.timeList[fIndex].stock
					// 		// this.explain = this.timeList[fIndex].explain
					// 	}else{
					// 		this.price = this.timeList[0].price
					// 		// this.explain = this.timeList[0].explain
					// 		this.inventory = this.timeList[0].stock
					// 		this.timeActive = this.timeList[0].id
					// 	}
						
						
					// }
				}
				//修改banner数据结构
				if(slider_image.length>0){
					this.bannerList = slider_image.map(item=>{
						return {
							url:item,
							type: 'image'
						}
					})
				}
			},
			getFishingProductDetailData(e){
				console.log(111)
				let {areaID} = e
				this.pageLoading = true
				getFishingProductDetail(areaID).then(res=>{
					this.pageLoading = false
					console.log(res);
					let {price,stock,store_name,store_info,fishing,sku,slider_image,Merchant} = res.data
					// let {open_start,open_end,mer_phone,fishing_date} = fishing?.mer_info
					let open_start = '',open_end = '',mer_phone='--',fishing_date='--'
					if(fishing?.mer_info){
						open_start = fishing.mer_info.open_start
						open_end = fishing.mer_info.open_end
						mer_phone = fishing.mer_info.mer_phone
						fishing_date = fishing.mer_info.fishing_date
						
					}
					// let {seat_mode,ret_weight_mode,change_seat_rule,max_prepare_time,max_ret_per_day} = fishing.ticket_config
					let seat_mode = '',ret_weight_mode = '',change_seat_rule={},max_prepare_time='',max_ret_per_day=''
					if(fishing?.ticket_config){
						seat_mode = fishing.ticket_config.seat_mode
						ret_weight_mode = fishing.ticket_config.ret_weight_mode
						change_seat_rule = fishing.ticket_config.change_seat_rule
						max_prepare_time = fishing.ticket_config.max_prepare_time
						max_ret_per_day = fishing.ticket_config.max_ret_per_day
					}
					// let {change_seat_price,ret_price_rule} = fishing.financial_config
					let change_seat_price = '',ret_price_rule = null
					if(fishing?.financial_config){
						change_seat_price = fishing.financial_config.change_seat_price
						ret_price_rule = fishing.financial_config.ret_price_rule
					}
					this.price = price
					// this.inventory = stock
					this.store = Merchant.mer_name
					this.area = store_name
					this.intro = store_info
					this.fishType = ['鲤鱼','草鱼','鲫鱼'],//鱼种
					this.date = fishing_date
					this.businessHours = open_start&&open_end?`${open_start.slice(0,-3)}-${open_end.slice(0,-3)}`:`24小时`
					this.storePhone = mer_phone
					this.moreInfo.seat_mode = seat_mode
					this.moreInfo.ret_weight_mode = ret_weight_mode
					this.moreInfo.change_seat_rule_allow = change_seat_rule!=null?change_seat_rule.allow:''
					this.moreInfo.change_seat_rule_delay = change_seat_rule!=null?change_seat_rule.delay:''
					this.moreInfo.max_prepare_time = max_prepare_time
					this.moreInfo.max_ret_per_day = max_ret_per_day
					this.moreInfo.change_seat_price = change_seat_price
					this.moreInfo.ret_price_rule.mode = ret_price_rule!=null?ret_price_rule.mode:''
					this.moreInfo.ret_price_rule.pric = ret_price_rule!=null?ret_price_rule.pric:''
					//修改回鱼价格数据结构为数组对象
					let newRuleList = []
					if(ret_price_rule){
						let ruleKey = Object.keys(ret_price_rule.rule)
						let ruleValue = Object.values(ret_price_rule.rule)
						for(let i = 0;i<ruleKey.length;i++){
							let start
							if(i === 0)start = '0'
							else start = ruleKey[i-1]
							newRuleList[i] = {
								start,
								scope:ruleKey[i],
								price:ruleValue[i]
							}
						}
					}
					this.moreInfo.ret_price_rule.ruleList = newRuleList
					console.log(newRuleList);
					//修改区域数组数据结构
					let area_config = []
					if(fishing?.area_config){
						fishing.area_config.forEach(function(element,index) {
							area_config[index] = {
								areaName: Object.keys(element)[0],
								seatList:Object.values(element)[0]
							}
						});
					}
					this.moreInfo.area_config = area_config
					//修改sku数据结构
					if(sku){
						let skuArr = Object.values(sku)
						this.timeList = skuArr.map((item,i)=>{
							return {
								id:item.unique,
								price:item.price,
								name:item.sku?item.sku:'--',
								stock:item.stock
							}
						})
						if(!e.timeActive){
							//如果不是通过分享进入
							this.price = this.timeList[0].price
							// this.explain = this.timeList[0].explain
							this.inventory = this.timeList[0].stock
							this.timeActive = this.timeList[0].id
						}else{
							// 否则查找到对应规格后选中
							let timeList = this.timeList
							this.timeActive = e.timeActive
							let fIndex = timeList.findIndex(item=>item.id === this.timeActive)
							if(fIndex!==-1){
								this.price = this.timeList[fIndex].price
								this.inventory = this.timeList[fIndex].stock
								// this.explain = this.timeList[fIndex].explain
							}else{
								this.price = this.timeList[0].price
								// this.explain = this.timeList[0].explain
								this.inventory = this.timeList[0].stock
								this.timeActive = this.timeList[0].id
							}
							
							
						}
					}
					//修改banner数据结构
					if(slider_image.length>0){
						this.bannerList = slider_image.map(item=>{
							return {
								url:item,
								type: 'image'
							}
						})
					}
				}).catch(err=>{
					this.pageLoading = false
					setTimeout(function(){
						uni.navigateBack()
					},1500)
				})
			},
			//选择时长
			changleTime(item){
				this.timeActive = item.id
				this.price = item.price
				this.inventory = item.stock
				// this.explain = item.explain
			},
			//跳转
			navTo(){
				uni.navigateTo({
					url:`/pages/store/fishpond/index?storeID=`+ this.storeId
				})
			},
			//立即购买
			submitOrder(){
				let islogin = this.isLogin
				let storeId = this.storeId;
				let areaId = this.areaId
				if (this.isLogin === false) {
					toLogin()
				} else {
					if(this.inventory === '0'){
						uni.$u.toast('此规格暂无库存')
						return
					}
					let params = {
						product_id: areaId,
						product_attr_unique: this.timeActive
					}
					createOrder(params).then(res=>{
						let {group_order_id} = res.data
						uni.navigateTo({
							url:`/pages/store/order_submit/index?id=${group_order_id}`
						})
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.ticket_details{
		position: relative;
		.header-pic{
			background-color: #f6f7f9;
			height: 420rpx;
			.noPhone{
				height: 350rpx;
				color: #eee;
				display: flex;
				justify-content: center;
				align-items: center;
				.pic{
					font-size: 150rpx;
				}
			}
		}
		.wrapper{
			width: 100%;
			position: absolute;
			top: 350rpx;
			background-color: #fff;
			border-radius: 20px 20px 0 0;
			padding: 40rpx 30rpx;
			min-height: calc(100vh - 350rpx);
			padding-bottom: 120rpx;
			.row1{
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				.r1-left{
					color: #549CE3;
					font-size: 66rpx;
					.symbol{
						font-size: 28rpx;
					}
				}
				.r1-right{
					font-size: 24rpx;
					color: #6f6f6f;
				}
			}
			.row2{
				margin-top: 20rpx;
				.name1{
					font-size: 38rpx;
					color: #333333;
					font-weight: bold;
				}
				.name2{
					font-size: 26rpx;
					color: #549CE3;
				}
			}
			.row3{
				font-size: 24rpx;
				color: #9f9f9f;
				margin-top: 16rpx;
			}
			.row4{
				display: flex;
				margin-top: 20rpx;
				.item{
					margin-right: 14rpx;
					font-size: 24rpx;
					padding: 2rpx 10rpx;
					border: 1px solid #549CE3;
					color: #549CE3;
					border-radius: 4px;
				}
			}
			.row5{
				background-color: #f6f7f9;
				padding: 20rpx 30rpx;
				font-size: 26rpx;
				color: #4E4C56;
				line-height: 40rpx;
				margin-top: 30rpx;
				border-radius: 8px;
				.box-row{
					display: flex;
					font-size: 26rpx;
					.label{
						flex-shrink: 0;
					}
					.cont{
						display: flex;
						margin-left: 10rpx;
						.cont-item{
							
						}
					}
					
					
				}
			}
			.more-info{
				display: flex;
				align-items: center;
				// border: 1px solid #eee;
				padding: 28rpx 30rpx;
				margin-top: 20rpx;
				border-radius: 8px;
				font-size: 24rpx;
				color: #4E4C56;
				background-color: #f6f7f9;
				.tags{
					display: flex;
					align-items: center;
					flex: 1;
					padding-top: 2rpx;
					margin-left: 10rpx;
					.single-tag{
						padding: 0 10rpx;
					}
				}
			}
			.select-seat{
				margin-top: 20rpx;
				border-radius: 8px;
				background-color: #f6f7f9;
				color: #4E4C56;
				padding: 20rpx 30rpx;
				.label{
					font-size: 26rpx;
					font-weight: bold;
					// color: #549CE3;
				}
				.ss-cont-wrap{
					margin-top: 10rpx;
					display: flex;
					flex-wrap: wrap;
					font-size: 24rpx;
					.ss-cont{
						display: flex;
						align-items: center;
						&::after{
							content: '';
							width: 1px;
							height: 20rpx;
							background-color: #d6d7d9;
							display: inline-block;
							margin: 0 10rpx;
						}
						&:last-child{
							&::after {
								display: none;
							}
						}
						.ss-cont-item{}
					}
				}
			}
			.select-wrap{
				border: 1px solid #eee;
				padding: 30rpx 30rpx 20rpx 30rpx;
				margin-top: 20rpx;
				border-radius: 8px;
			}
			.row6{
				margin-top: 15rpx;
				.tit{
					font-size: 28rpx;
					font-weight: bold;
				}
				.option-wrap{
					margin-top: 16rpx;
					display: flex;
					padding-top: 10rpx;
					flex-wrap: wrap;
					.option-item{
						background-color: #efefef;
						color: #4E4C56;
						height: 96rpx;
						line-height: 96rpx;
						padding: 0 16rpx;
						margin-right: 16rpx;
						border-radius: 8px;
						font-size: 26rpx;
						margin-bottom: 18rpx;
						min-width: 96rpx;
						text-align: center;
					}
					.active{
						background-color: #ffc53e;
						color: #fff;
					}
				}
			}
			.row7{
				.option-cont-wrap{
					// background: #efefef;
					padding: 24rpx 0rpx 10rpx 0;
					font-size: 24rpx;
					color: #6f6f6f;
					border-radius: 8px;
					.tit{
						font-size: 24rpx;
					}
				}
			}
		}
		.footer-wrap{
			background-color: #fff;
			position: fixed;
			bottom: 0;
			width: 100%;
			display: flex;
			padding: 20rpx 30rpx;
			.left{
				display: flex;
				width: 220rpx;
				.icon-btn{
					background-color: #efefef;
					height: 80rpx;
					width: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 8px;
					margin: 0 10rpx;
					overflow: hidden;
					.share-icon{
						height: 80rpx;
						width: 80rpx;
						background-color: #efefef;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 8px;
					}
				}
			}
			.right{
				flex:1;
				.btn{
					background-color: #ffc53e;
					border-radius: 8px;
					color: #fff;
					font-size: 30rpx;
					height: 80rpx;
					text-align: center;
					line-height: 80rpx;
				}
			}
		}
		.more-popup{
			padding: 30rpx;
			.title{
				text-align: center;
				font-size: 28rpx;
				color:#333;
				margin-top: 10rpx;
				font-weight: bold;
			}
			.list-wrap{
				margin-top: 30rpx;
				font-size: 24rpx;
				margin-bottom: 40rpx;
				.row{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 30rpx 10rpx;
					border-bottom: 1px solid #eee;
					.left{
						color: #333;
						flex-shrink:0;
					}
					.right{
						color: #6f6f6f;
						padding-left: 20rpx;
						text-align: right;
						flex: 1;
						.single{
							padding: 0 10rpx;
							border-right: 1px solid #eee;
							white-space: nowrap;
							line-height: 32rpx;
							&:last-child{
								border: none;
								padding-right: 0;
							}
						}
						.single-area{
							display: flex;
							justify-content: flex-end;
						}
					}
				}
			}
			.btn{
				background-color: #ffc53e;
				color: #fff;
				border-radius: 50px;
				text-align: center;
				padding: 18rpx 0;
				font-size: 26rpx;
				
			}
		}
	}
</style>
